<template>
  <div>
     <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <el-button type="primary" @click="showAddCate">添加分类</el-button>
        <tree-table style="margin-top:15px" :data="cateList" :columns="columns" :selection-type='false' :expand-type="false" show-index border index-text="#" :show-row-hover="false">
            <template  slot="likes" slot-scope="scope">
                <i v-if="scope.row.cat_deleted==false" class="el-icon-success" style="color:lightgreen"></i>
                <i v-else class="el-icon-error"></i>
            </template>
               <template  slot="paixu" slot-scope="scope">
                   <el-tag v-if="scope.row.cat_level == 0">一级</el-tag>
                    <el-tag  v-else-if="scope.row.cat_level == 1" type="success">二级</el-tag>
                     <el-tag  v-else type="warning">三级</el-tag>
            </template>
               <template  slot="edit" slot-scope="scope">
                   <el-button size="mini" type="primary"  icon="el-icon-edit" @click="showAddCate">编辑</el-button>
                     <el-button size="mini" type="danger"  icon="el-icon-delete">删除</el-button>
            </template>
        </tree-table>
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryData.pagenum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="queryData.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </el-card>
    <el-dialog
        title="提示"
        @close="cateDialogColse"
        :visible.sync="addCateDialogVisible"
        width="50%">
     <el-form ref="cateFormRef" :model="addCateForm" :rules="addCaterules" label-width="100px">
        <el-form-item label="分类名称"  prop="cat_name">
            <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
         <el-form-item label="父级分类">
              <el-cascader
                v-model="cateValue"
                :options="parentCata"
                :props="cateProps"
                clearable
                @change="cateHandleChange"></el-cascader>
        </el-form-item>
     </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addCateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCateSubmit">确 定</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
export default {

  data () {
    return {
        // 设置分页配置
        queryData:{
            type:3,
            pagenum:1,
            pagesize:10
        },
    // 数据
        cateList:[],
        
        total:0,
        // 配置表格的参数
        columns:[{
            label:'分类名称',
            prop:"cat_name"
        },
        {
            label:'是否有效',
            type:'template',
            template:'likes'
        },
         {
            label:'排序',
            type:'template',
            template:'paixu'
        },
         {
            label:'操作',
            type:'template',
            template:'edit'
        }
        ],
        addCateDialogVisible: false,
        // 发送求情需要的数据
        addCateForm:{
            cat_pid:'',
            cat_level:'',
            cat_name:''
        },
        // 效验添加分类的判断
        addCaterules:{
            cat_name:[
                { required: true, message: '请输入活动名称', trigger: 'blur' },
            ]
        },
        // 次联选择器需要的数据
        parentCata:[],
        cateValue:[],
        cateProps:{
            value:'cat_id',
            label:'cat_name',
            expandTrigger:'hover',
            checkStrictly:true
        }
        
    }
  },
   methods: { 
    //    获取数据
     async  getGoods () {
     const res  = await  this.axios.get('categories',{
              params:this.queryData
          })
         this.cateList = res.data.result;
         this.total = res.data.total
          console.log(this.cateList);
          console.log(  this.total);  
      },
    //   条数变化
      handleSizeChange (v) {
          this.queryData.pagesize = v;
          this.getGoods()
      },
    //   分页器页码事件
      handleCurrentChange (v) {
          this.queryData.pagenum = v;
          this.getGoods()
      },
    //   点击添加分类获得数据渲染到data里面 
     async  showAddCate () {
          this.addCateDialogVisible= true;
        const res = await  this.axios.get('categories',{
            params:{
                type:2
            }
        })
        if(res.meta.status !== 200) return this.$mg.console.error(res.meta.msg);
    
        this.parentCata = res.data
        this.$mg.success(res.meta.msg)
            console.log(  this.parentCata);
      },
    //   次联选择器change事件 
      cateHandleChange () {
            console.log(this.cateValue);
            if(this.cateValue.length>0){
                this.addCateForm.cat_pid = this.cateValue[this.cateValue.length-1];
                 this.addCateForm.cat_level =  this.cateValue.length;
            }else{
                this.addCateForm.cat_pid = 0;
                this.addCateForm.cat_level = 0;
            }
      },
      addCateSubmit () {
         this.$refs.cateFormRef.validate(async falg=>{
             if(!falg) return
            const res =  await this.axios.post('categories/',this.addCateForm)
        if(res.meta.status !== 201) return this.$mg.error(res.meta.msg);
        this.$mg.success(res.meta.msg);
        this.addCateDialogVisible = false;
        this.getGoods()
         })
          
      },
      cateDialogColse() {
          this.$refs.cateFormRef.resetFields();
          this.cateValue = [],
          this.addCateForm.cat_pid = '',
          this.addCateForm.cat_level = ''
      }
  },

  created () {
      this.getGoods()
  }
}
</script>

<style lang='less' scoped>
.el-cascader {
    width: 100%;
}
</style>
